<template>
  <div class="message-item" :class="{ 'user-message': message.isFromUser }">
    <p>{{ message.content }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';

export default defineComponent({
  props: {
    message: {
      type: Object as PropType<{
        content: string;
        isFromUser: boolean;
      }>,
      required: true
    }
  }
});
</script>

<style scoped lang="scss">
.message-item {
  padding: 5px;
  margin-bottom: 5px;
}
.user-message {
  text-align: right;
  background-color: #e6f7ff;
}
</style>
